<template>
  <div v-if="detailInfo.img">
    <div>这是详情页面</div>
    <p>{{ detailInfo.nm }}</p>
    <img :src="detailInfo.img.split('/w.h').join('/200.300')" alt="" />
    <button @click="guess">猜你喜欢</button>
  </div>
  <div v-else>loading...</div>
</template>

<script>
// import { detailApi } from "@/api/detail";
import { mapActions, mapState } from "vuex";

export default {
  // data() {
  //   return {
  //     detailInfo: {},
  //   };
  // },
  // computed: mapState(["detailInfo"]),
  computed: mapState({
    detailInfo: (state) => state.detail.detailInfo,
  }),
  methods: {
    guess() {
      this.$router.push("/detail/1282401");
    },
    ...mapActions("detail", ["asyncGetDetailData"]),
  },
  created() {
    // const res = await detailApi({ id: this.$route.params.id });
    // console.log(res.result);
    // this.detailInfo = res.result;
    this.asyncGetDetailData({ id: this.$route.params.id });
  },

  // beforeCreate() {
  //   console.log("beforeCreate", this);
  // },
  // 这三个都是路由提供的生命周期
  async beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    // console.log("beforeRouteEnter", this);
    // const res = await detailApi({ id: to.params.id });
    // // vm相当于页面的this

    // next((vm) => {
    //   vm.detailInfo = res.result;
    // });
    next();
  },
  async beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    // console.log("beforeRouteUpdate");
    const res = await detailApi({ id: to.params.id });
    console.log(res.result);
    this.detailInfo = res.result;
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    // console.log("beforeRouteLeave");
    // next();

    const answer = window.confirm(
      "Do you really want to leave? you have unsaved changes!"
    );
    if (answer) {
      next();
    } else {
      next(false);
    }
  },
};
</script>
